<template>
  <div class="allHtml">
    <el-container style="height: auto">
      <el-header>

      </el-header>
      <el-main>
        <div style="font-size: 20px;margin: 26px 0;color: #333;line-height: 26px;
        padding-left: 20px;font-weight: bolder">
          {{ bookDetail.bookName }}
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="5">
              <div style="width: 160px;height: 160px;">
                <img
                    :src="bookDetail.picture"
                    style="height: 160px;height: 160px">
              </div>

            </el-col>
            <el-col :span="12" style="font-size: 12px;line-height: 20px;
            color: #666!important;">
              <el-row>
                <el-col :span="12">
                  作者:<span style="color: #333!important;">{{ bookDetail.author }}</span><br>
                  出版社:<span style="color: #333!important;">{{ bookDetail.press }}</span><br>
                  出版时间:<span style="color: #333!important;">{{ bookDetail.price }}</span><br>
                  版次:<span style="color: #333!important;">{{ bookDetail.edition }}</span><br>
                  定价:<span style="color: red!important;font-size: 20px">{{ bookDetail.price }}</span><br>
                </el-col>
                <el-col :span="12">
                  分类:<span style="color: #333!important;">{{ bookDetail.classify }}</span><br>
                  ISBN:<span style="color: #333!important;">{{ bookDetail.ISBN }}</span><br>
                  新旧程度:<span style="color: #333!important;">{{ bookDetail.degree }}</span><br>
                  开本:<span style="color: #333!important;">{{ bookDetail.folio }}</span><br>
                  纸张:<span style="color: #333!important;">{{ bookDetail.paper }}</span><br>
                </el-col>
              </el-row>
              <br>
<!--              简介开始-->
              <div class="book_detail_info" ref="book_detail_info">
                {{bookDetail.info}}
              </div>
              <a v-if="show" style="color: #409EFF" href="javascript:0" @click="showInfo">↓展开</a>
              <a v-else style="color: #409EFF" href="javascript:0" @click="notShowInfo">↑收起</a>
              <div style="margin-top: 8px">
                <el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number>
                <el-button style="margin-left: 8px;color:#fff;background-color: #8c222c" @click="addShop(num)">加入购物车
                </el-button>
              </div>
            </el-col>
            <el-col :span="7">
              相关分类:
              <el-divider/>
              <span v-for="category in relatedCategories">
                <a style="margin: 10px 50px 0 0;color: #365899;font-size: 14px" :href="category.href">{{category.name}}</a>
              </span>
            </el-col>
          </el-row>
        </div>
        <div style="background-color:#f8f7f3;margin-top: 10px ;padding: 5px 10px">
          <span style="font-size: 18px;line-height: 30px;color: #333;font-weight: 700">相关图书/</span><a href="">更多</a>
        </div>
        <div style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="4" v-for="aba in aboutBookArr">
              <el-card :body-style="{ padding: '0px' }">
                <div class="book_div" style="padding: 20px 20px 0 20px">
                  <a href="">
                    <img :src="aba.picture" width="auto" height="140"  @click="detail(aba.id)">
                  </a>
                </div>
                <div style="padding: 14px;">
                  <a href="" style="text-decoration: none;color: #333">
                    <p style="margin: 0 auto;word-break: break-all;font-size: 12px;line-height: 20px">
                      {{ aba.bookName }}
                    </p>
                  </a>
                  <div style="color: #bbb;font-size: 12px">
                        <span style="float: left;font-style: normal;margin-right: 3px;font-size: 16px;color: #bf7f5f;">
                          ￥{{ aba.price }}
                        </span>起
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer>

      </el-footer>
    </el-container>

  </div>
</template>

<script>
import axios from "axios";
import {mapState} from "vuex";
import router from "@/router";

export default {
  computed: {
    ...mapState(["isLogin", "userId"])
  },
  data() {
    return {
      //图书简介展示
      show: true,
      num: 1,
      wd: "",
      relatedCategories: [
        {name: "相关分类1", href: ""},
        {name: "相关分类2", href: ""},
        {name: "相关分类3", href: ""},
        {name: "相关分类4", href: ""}
      ],
      p: {},
      bookDetail: {
        bookId: 0,
        classify: "",
        bookName: "",
        author: "",
        degree: "",
        press: "",
        price: 0,
        oldPrice: 0,
        saleCount: 0,
        folio: 0,
        paper: "",
        isEnable: 1,
        isMarketable: 1,
        created: "",
        modified: "",
        pcs: 0,
        classifyId: 0,
        ISBN: "",
        edition: 0
      },
      aboutBookArr: [
        {
          id:'',
          bookName:'',
          classify:'',
          picture:'',
          author:'',
          price:'',
          info:''}],
    }
  },
  methods: {
    detail(id) {
      router.push("/detail?"+id)
    },
    notShowInfo(){
      this.$refs.book_detail_info.className='book_detail_info'
      this.show=!this.show
    },
    showInfo(){
      this.$refs.book_detail_info.className=''
      this.show=!this.show
    },
    handleSelect(index) {
      if (index !== -1) {
        location.href = "/result.html?cid=" + index;
      }
    },
    handleChange(value) {
      console.log(value);
    },
    //添加购物车
    addShop(num) {
      let data = {bookId: 0, count: 0}
      data.bookId = this.bookDetail.bookId
      data.count = num
      if (!this.isLogin) { //没有登录保存到浏览器
        let oldData = localStorage.getItem("cartTemp")
        let cartTemp
        if (typeof (oldData) === 'undefined' || oldData === null) {
          console.log("本地购物车数据为空，初始化一个数组")
          cartTemp = []
        } else {
          console.log("本地读取到购物车信息：")
          cartTemp = JSON.parse(oldData)
          console.log(cartTemp)
        }
        for (let i = 0; i < cartTemp.length; i++) {
          if (cartTemp[i].bookId === data.bookId) {
            console.log("原来购物车中已有该书")
            cartTemp[i].count += data.count
            localStorage.setItem("cartTemp", JSON.stringify(cartTemp))
            console.log("向本地保存购物车数据: ")
            console.log(localStorage.getItem("cartTemp"))
            return
          }
        }
        cartTemp.push(data)
        localStorage.setItem("cartTemp", JSON.stringify(cartTemp))
        console.log("向本地保存购物车数据: ")
        console.log(localStorage.getItem("cartTemp"))
        this.$message.success("保存到购物车啦~")
        return
      }
      data = {
        bookId: 0,
        picture: '',
        bookName: '',
        degree: '',
        price: 0,
        count: 0,
      }
      data.bookId = this.bookDetail.bookId
      data.picture = this.bookDetail.picture
      data.bookName = this.bookDetail.bookName
      data.degree = this.bookDetail.degree
      data.price = this.bookDetail.price
      data.count = num
      //登录了直接保存到购物车表单
      console.log("登录状态下添加购物车发送的参数：")
      console.log(data)
      axios.post("/cart/add/" + this.userId, data).then(r => {
        if (r.data.state === 20000) {
          console.log("购物车数据保存到服务端")
          this.$message.success("放好到购物车啦~")
          return
        }
        this.$message.error("哎呀，出错了，请重试~")
      }).catch(e => console.log(e))
    }
  },
  mounted: function () {
    //获取商品id
    let fullPath = router.currentRoute.fullPath
    let bookId = fullPath.substr(fullPath.indexOf('?')+1)
    console.log("bookID: " +bookId)
    //通过id查询商品信息
    axios.get("/book/" + bookId).then(r => {
      if (r.data.state === 20000) {
        console.log("服务器返回数据：")
        console.log(r.data.data)
        this.bookDetail = r.data.data
        this.bookDetail.bookId = r.data.data.id
        //获取相关分类
        axios.get("/category/related/" + this.bookDetail.classifyId).then(r => {
          if (r.data.state === 20000) {
            this.relatedCategories = r.data.data
          }
        }).catch(e => console.log(e))
        //获取相关书籍推荐
        axios.get("/book/related/"+this.bookDetail.classifyId).then(r=>{
          if (r.data.state === 20000) {
            this.aboutBookArr = r.data.data
          }
        }).catch(e=>console.log(e))
      }
    }).catch(e => console.log(e))
    //获取推荐相关书籍
  }
}
</script>

<style scoped>
.el-divider--horizontal {
  margin: 10px 0;
}

.allHtml {
  overflow-y: auto;
  height: auto;
}
.book_detail_info{
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
}
a {
  text-decoration: none;
}
</style>